<template>
  <div>
    <a-card class="card"> 设施农业用地备案表 </a-card>
    <div style="padding: 0 15px">
      <div class="wjsc">文件上传</div>
      <div class="xz">
        <a-button type="primary" size="small" @click="PlXdown"
          >批量下载</a-button
        >
      </div>
      <a-table
        bordered
        ref="table"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
      >
        <span slot="filename" slot-scope="text, record">
          <a @click="YlwJ(record)">{{ text }}</a>
        </span>
        <span slot="action" slot-scope="text, record">
          <a
            @click="DelWJ(record)"
            v-if="
              record.filepath != null &&
              (xmJd == 1 || xmJd == '' || xmJd == null)
            "
            >删除</a
          >&nbsp;&nbsp;
          <a @click="DownWj(record)" v-if="record.filepath != null">下载</a>
        </span>
        <span slot="add" slot-scope="text, record, index">
          <a-button
            v-if="xmJd == 1 || xmJd == '' || xmJd == null"
            @click="exportselect(text, record, index)"
            type="primary"
            size="small"
            >选择文件</a-button
          >
          <span
            v-if="xmJd == 1 || xmJd == '' || xmJd == null"
            style="padding-left: 5px"
            >{{ text == "" ? "未选择任何文件" : text }}</span
          >
          <a-button
            class="btn"
            @click="Shangchuan"
            v-if="xmJd == 1 || xmJd == '' || xmJd == null"
            >上传</a-button
          >
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {
  zfilesSave,
  zfilesList,
  zfilesdel,
  download,
  zfilespreview,
  Alldown,
} from "../../../api/api";
import {
  Filespreview,
  downloadfile,
  PLdown,
  uploadPDF,
} from "../../../api/api2";
export default {
  props: {
    xmJd: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      columns: [
        {
          title: "IDX",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "类别",
          dataIndex: "type",
          align: "center",
          // scopedSlots: { customRender: "type" },
          customRender: (value, row, index) => {
            console.log(row, index, "index");
            let arr = this.dataSource.filter((item) => item.filekind == 0);
            let btt = this.dataSource.filter((item) => item.filekind == -1);
            let indexA1 = this.dataSource.findIndex(
              (item) => item.filekind == 0
            );
            let indexA0 = this.dataSource.findIndex(
              (item) => item.filekind == -1
            );

            if (this.dataSource.length == 2) {
              return value;
            } else {
              if (index == indexA1) {
                var obj = {
                  children: "用地备案表",
                  attrs: { rowSpan: arr.length },
                };
                return obj;
              } else if (index == indexA0) {
                var obj = {
                  children: "其他",
                  attrs: { rowSpan: btt.length },
                };
                return obj;
              } else {
                var obj = {
                  children: "",
                  attrs: { rowSpan: 0 },
                };
                return obj;
              }
            }
          },
        },
        {
          title: "文件名",
          dataIndex: "filename",
          align: "center",
          scopedSlots: { customRender: "filename" },
        },
        {
          title: "上传时间",
          dataIndex: "adddate",
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "action",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
        {
          title: "添加",
          dataIndex: "add",
          align: "center",
          scopedSlots: { customRender: "add" },
        },
      ],
      dataSource: [],
      filename: "",
      filepath: "",
      id: "",
      filesize: "",
      ispatn: "",
    };
  },
  async mounted() {
    //获取文件列表
    this.getdata();
  },
  methods: {
    async getdata() {
      const params = {
        jbxxSex: this.$route.query.id,
      };
      const res = await zfilesList(params);
      if(res.code == 200)
      {
        res.result.push(
        {
          type: "用地备案表",
          add: "",
          filekind: 0,
        },
        {
          type: "其他",
          add: "",
          filekind: -1,
        }
      );
      let arr = res.result.filter((item) => item.filekind == 0);
      let btt = res.result.filter((item) => item.filekind == -1);
      if (arr.length > 1 || btt.length > 1) {
        const a = arr.filter((item) => item.hasOwnProperty("filename"));
        const b = btt.filter((item) => item.hasOwnProperty("filename"));
        const cdd = btt.length > 1 ? arr.concat(b) : a.concat(btt);
        cdd.map((item) => {
          item["add"] = "";
          item["action"] = "";
          item["type"] = item.filekind == 0 ? "用地备案表" : "其他";
          return item;
        });
        this.dataSource =
          arr.length == 0
            ? cdd.filter((item) => item.hasOwnProperty("filename"))
            : cdd.length >= 3 && btt.length >= 2
            ? cdd.filter((item) => item.hasOwnProperty("filename"))
            : cdd;
      } else {
        let ctt = arr.concat(btt);
        ctt.map((item) => {
          item["add"] = "";
          item["action"] = "";
          return item;
        });
        this.dataSource = ctt;
      }
      }else
      {
        this.$message.error(res.message);
      }
  
    },
    exportselect(text, record, index) {
      this.ispatn = record.filekind;
      // 创建一个隐藏的input元素
      const input = document.createElement("input");
      input.type = "file";
      input.accept = "application/pdf";
      input.style.display = "none";
      // 监听input元素的change事件
      input.addEventListener("change", async (event) => {
        const file = event.target.files[0];
        // 在这里可以对文件进行处理，比如上传到服务器或进行其他操作
        let formData = new FormData();
        formData.append("file", file);
        formData.append("jbxxSec", this.$route.query.id);
        const res = await uploadPDF(formData);
        if (res.data.code == 200) {
          const data = res.data.result;
          this.filename = data.name;
          this.dataSource[index].add = data.name;
          this.filepath = data.path;
          this.filesize = data.size;
        }else
        {
          this.$error({
                title: res.data.message,
                okText: "确定",
              });
        }
      });
      // 触发input元素的点击事件
      input.click();
    },
    //保存
    async Shangchuan() {
      if (this.filename == "" || this.filename == undefined) {
        this.$warning({
          title: "请上传文件!",
          okText: "确定",
        });
      } else {
        console.log(this.$route.query.id, "111");
        const params = {
          filekind: this.ispatn == 0 ? 0 : -1,
          filename: this.filename,
          filepath: this.filepath,
          fkFlow: "001",
          jbxxSec: this.$route.query.id,
          filesize: this.filesize,
        };
        const data = await zfilesSave(params);
        if (data.code == 200) {
          this.$success({
            title: data.message,
            okText: "确定",
          });
          this.dataSource = [];
          this.filename = "";
          this.filepath = "";
          this.filesize = "";
          this.getdata();
        } else {
          this.$error({
            title: data.message,
            okText: "确定",
          });
        }
      }
    },
    //删除文件
    async DelWJ(data) {
      let that = this;
      this.$confirm({
        title: "确定要删除吗?",
        cancelText: "取消",
        okText: "确定",
        onOk: () => {
          return new Promise(async (resolve, reject) => {
            const res = await zfilesdel({ id: data.id });
            if (res.code == 200) {
              this.$message.success(res.message);
              resolve();
              that.getdata();
            } else {
              this.$message.error(res.message);
              reject();
            }
          }).catch();
        },
      });
    },
    //下载文件
    async DownWj(data) {
      var name = data.filename;
      const res = await download({ fileName: data.filepath });
      downloadfile(res, name);
    },
    //预览文件
    YlwJ(data) {
      Filespreview(data);
    },
    //批量下载
    async PlXdown() {
      const res = await Alldown({ id: this.$route.query.id, type: "0" });
      PLdown(res);
    },
  },
};
</script>

<style lang="less" scoped>
.card {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", sans-serif;
  color: #313944;
  letter-spacing: 0.5px;
  text-align: center;
  height: 50px;
  line-height: 0px;
  font-size: 18px;
}
.wjsc {
  margin-top: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  display: table;
  width: 100%;
  padding-left: 25px;
  border-bottom: 1px solid rgba(77, 82, 89, 0.05);
  background-color: #48b0f7 !important;
  color: #fff !important;
}
.xz {
  border: 1px solid #f0f0f0;
  padding: 10px;
}
.btn {
  margin-left: 60px;
}
</style>